<template>
    <div class="big_box">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item>财务管理</el-breadcrumb-item>
            <el-breadcrumb-item>发票管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-divider></el-divider>
        <el-form label-width="120px" :model="form">
            <el-row :gutter="5" class="row-bg">
                <el-col :span="3">
                    <el-input v-model="form.BillNumber" placeholder="请输入开票单号"></el-input>
                </el-col>
                <el-col class="col" :span="3">
                    <el-input v-model="form.InvoiceCode" placeholder="请输入发票代码"></el-input>
                </el-col>
                <el-col class="col" :span="3">
                    <el-input v-model="form.InvoiceNumber" placeholder="请输入发票号码"></el-input>
                </el-col>
                <el-col class="col" :span="3">
                    <el-date-picker style="width:100%"
                                    v-model="date.Start"
                                    type="date"
                                    placeholder="开始时间">
                    </el-date-picker>
                </el-col>
                <el-col class="col" :span="3">
                    <el-date-picker style="width:100%"
                                    v-model="date.End"
                                    type="date"
                                    placeholder="结束时间">
                    </el-date-picker>
                </el-col>
                <el-col class="col" :span="1">
                    <el-button style="width:100%" icon="el-icon-search" @click="InitTable()"></el-button>
                    </el-col>
            </el-row>
        </el-form>
        <el-row  style="padding:10px 0px">
            <el-col :span="24">
                <el-table :data="tableData"
                          border>
                    <el-table-column header-align="center" fixed type="index" label="序号" align="center" :index="_indexMethod"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="BillNumber" label="开票编号" width="150px"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="InvoiceCode" label="发票代码"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="InvoiceNumber" label="发票号码"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="Money" label="开票金额"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="State" label="状态" width="130px">
                        <template slot-scope="scope">
                            <label v-if="scope.row.State == 1"> <span style='color:#1E90FF'>作废</span></label>
                            <label v-else-if="scope.row.State == 2"><span style='color:red'>红字</span></label>
                            <label v-else>正常</label>
                        </template>
                    </el-table-column>
                    <el-table-column header-align="center" align="center" prop="RedMarkInvoiceNumber" label="红字发票号" width="130px"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="RedMarkInvoiceCode" label="红字发票代码" width="130px"></el-table-column>
                    <el-table-column header-align="center" align="center" prop="RedMarkInvoiceDate" label="红字发票日期" width="130px">
                     <!--   <template slot-scope="scope">
                            <label>{{scope.row}}</label>
                        </template>-->
                    </el-table-column>
                    <el-table-column prop="address" header-align="center" align="center" label="操作" fixed="right" width="300px">
                        <template slot-scope="scope">
                            <el-button type="info" size="mini" plain @click="edit(scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" plain @click="cancel(scope.row)">作废</el-button>
                            <el-button type="warning" size="mini" plain @click="redMark(scope.row)"> 红字</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
                <div class="block">
                    <el-pagination @size-change="InitTable"
                                   @current-change="InitTable"
                                   :current-page.sync="pagination.currentPage"
                                   :page-sizes="pagination.pagesizes"
                                   :page-size.sync="pagination.pagesize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total.sync="pagination.total">
                    </el-pagination>
                </div>
            </el-col>
        </el-row>

        <el-dialog :visible.sync="detailCashierShow" width="40%" title="红字操作">
            <el-form class="demo-form-inline" :model="obj" label-width="140px">
                <div>
                    <el-form-item label="新发票号码">
                        <el-input type="text" v-model="obj.RedMarkInvoiceNumber"></el-input>
                    </el-form-item>
                    <el-form-item label="新发票代码">
                        <el-input type="text" v-model="obj.RedMarkInvoiceCode"></el-input>
                    </el-form-item>
                    <el-form-item label="新发票时间">
                        <el-date-picker
                                v-model="obj.RedMarkInvoiceDate"
                                :clearable="false"
                                :editable="false"
                                style="width: 100%"
                                type="date"
                                placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div style="text-align:center">
                    <el-button type="success" @click="submitCashier">确定</el-button>
                </div>
            </el-form>
        </el-dialog>



        <el-dialog :visible.sync="ShowUpdateShow" width="40%" title="修改发票">
            <el-form class="demo-form-inline" :model="formDB" label-width="140px">
                <el-form-item label="新发票号码">
                    <el-input type="text" v-model="formDB.InvoiceCode"></el-input>
                </el-form-item>

                <el-form-item label="新发票号码">
                    <el-input type="text" v-model="formDB.InvoiceNumber"></el-input>
                </el-form-item>

                <el-form-item label="金额">
                    <el-input type="text" v-model="formDB.Money"></el-input>
                </el-form-item>

                <div style="text-align:center">
                    <el-button type="success" @click="submitformCashier">确定</el-button>
                </div>
            </el-form>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        name: "FinanceInvoiceManage",
        data() {
            return {
                detailCashierShow: false,
                ShowUpdateShow: false,
                form: {
                    BillNumber: '',
                    InvoiceCode: '',
                    InvoiceNumber: '',
                },
                formDB: {},
                date: {
                    Start: "",
                    End: "",
                },
                tableData: [],
                pagination: {
                    currentPage: 1,
                    pagesizes: [10, 20, 30, 40, 50],
                    pagesize: 10,
                    total: 0
                },
                obj: {
                    Id: '',
                    RedMarkInvoiceNumber: '',
                    RedMarkInvoiceCode:'',
                    RedMarkInvoiceDate:'',
                },
            }
        },
        created() {
            this.InitTable()
        },
        methods: {
            InitTable() {
                let loadding = this.openLoading();
                this.$http.post("/Finance/GetFinanceInvoiceManageDetail",
                    {
                        form: this.form,
                        date: this.date,
                        currentPage: this.pagination.currentPage,
                        pagesize: this.pagination.pagesize,
                    })
                    .then(res => {
                        loadding.close();
                        console.log(res);
                        this.tableData = res.data.rows;
                        this.pagination.total = res.data.count;
                    });
            },

            edit(obj) {
                this.$http.get("/Finance/UpdateFinanceInvoiceManageBit?id=" + obj.Id).then(res => {
                    if (res.data.mes.IsSuccess) {
                        this.ShowUpdateShow = true;
                        this.formDB = res.data.obj;
                    } else {
                        this.$message.error(res.data.mes.Msg);
                    }
                });
            },
            submitformCashier() {
                let loadding = this.openLoading();
                this.$http.post("/Finance/UpdateFinanceInvoiceManage", { finance: this.formDB }).then(res => {
                    loadding.close();
                    if (res.data.IsSuccess) {
                        this.$message.success(res.data.Msg);
                        this.ShowUpdateShow = false;
                        this.InitTable();
                    } else {
                        this.$message.error(res.data.Msg);
                    }
                });
            },
            cancel(obj) {
                this.$confirm('确认作废吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消'
                }).then(() => {
                    let loadding = this.openLoading();
                    this.$http.get("/Finance/CancelFinanceInvoiceManageById?id=" + obj.Id).then(res => {
                        loadding.close();
                        if (res.data.IsSuccess) {
                            this.$message.success(res.data.Msg)
                            this.InitTable();
                        } else {
                            this.$message.error(res.data.Msg)
                        }
                    });
                });
            },
            redMark(obj) {
                this.obj.Id = obj.Id;
                this.obj.RedMarkInvoiceNumber = '';
                this.obj.RedMarkInvoiceCode = '';
                this.obj.RedMarkInvoiceDate = new Date();
                this.detailCashierShow = true;
            },
            submitCashier() {
                let loadding = this.openLoading();
                let _this=this;
                this.$http.post("/Finance/RedMarkFinanceInvoiceManageById", {
                    Id:_this.obj.Id,
                    RedMarkInvoiceNumber:_this.obj.RedMarkInvoiceNumber,
                    RedMarkInvoiceCode:_this.obj.RedMarkInvoiceCode,
                    RedMarkInvoiceDate:_this.obj.RedMarkInvoiceDate,}).then(res => {
                    loadding.close();
                    if (res.data.IsSuccess) {
                        this.$message.success(res.data.Msg)
                        this.detailCashierShow = false;
                        this.InitTable();
                    } else {
                        this.$message.error(res.data.Msg)
                    }
                })
            },
            _indexMethod(index) {
                return ((this.pagination.currentPage - 1) * this.pagination.pagesize) + index + 1
            },
        },
    }

</script>

<style scoped>

    .big_box {
        padding: 15px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .buttongroup {
        margin-right: 5px !important;
        border-radius: 4px !important;
    }

    .DialogTable {
        position: fixed;
    }
</style>